@font-face {
    font-family: 'custom-font';
    src: url('~@/assets/font/STXINGKA.TTF');
    font-style: normal;
    font-weight: normal;
};
.cboard-login {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/login/login-bg.jpg') no-repeat center right;
    background-size: 100% 100%;
    $width: 500px;
    $left: 35%;
    &-content {
        position: absolute;
        min-width: $width;
        height: 100%;
        display: flex;
        align-items: center;
        animation: transformLeft 0.8s;
        animation-fill-mode: forwards;
    }
    &-box {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 24px;
        background-color: rgba(255,255,255,0.8);
        box-shadow: 0 0 20px rgba(80,4,26,0.3);
        border-radius: 4px;
        .login-logo {
            width: 60px;
            height: 60px;
            margin: 0 auto;
        }
        .login-title {
            text-align: center;
            padding: 20px 0;
            font-size: 1.5rem;
            color:rgba(145,145,145,1);
            background:linear-gradient(58deg, rgba(64,158,255,1) 0%, rgba(79, 200, 255, 1.0) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .login-view {
            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0px 1000px white inset !important;
            }
            .el-input--prefix .el-input__inner {
                padding-left: 60px;
            }
            .el-input__prefix {
                display: inline-block;
                width: 50px;
                text-align: center;
                i {
                    font-size: 20px;
                }
                &:before {
                    content: "";
                    position: absolute;
                    top: 10px;
                    bottom: 10px;
                    right: 0px;
                    width: 1px;
                    background-color: rgba(#002766, 0.15);
                }
            }
        }
        .login-btn {
            width: 100%;
            border-color: unset;
            background:linear-gradient(58deg, rgba(64,158,255,1) 0%, rgba(79, 200, 255, 1.0) 100%);
        }
    }
    footer {
        position: absolute;
        width: $width;
        left: $left;
        bottom: 30px;
        font-size: 16px;
        color:rgba(0,0,0,0.65);
        text-align: center;
    }
    @keyframes transformLeft {
        0% {
            left: - $width;
            transform: scale(0.3);
        }
        100% {
            left: $left;
            transform: scale(1);
        }
    }
}